import React, {PureComponent} from 'react';
import {LoginWrapper, LoginBox, LoginInput, LoginBtn} from './styled';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom'
import {actionCreators} from './store'

class Login extends PureComponent {
    render() {
        const {loginSatus} = this.props;

        if (!loginSatus) {
            return <LoginWrapper>
                <LoginBox>
                    <LoginInput placeholder='手机号' ref={(input) => {
                        this.account = input
                    }}/>
                    <LoginInput placeholder='密码' type='password' ref={(input) => {
                        this.pwd = input
                    }}/>
                    <LoginBtn onClick={() => this.props.login(this.account, this.pwd)}>登录</LoginBtn>
                </LoginBox>
            </LoginWrapper>
        } else {
            //路由重定向
            return <Redirect to='/'/>
        }

    }

}

const mapStateToProps = (state) => ({
    loginSatus: state.getIn(['login', 'login'])
});
const mapDispatchToProps = (dispatch) => {
    return {
        login(account, pwd) {
            // console.log(account.value,pwd.value)
            dispatch(actionCreators.login(account.value, pwd.value))
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);